<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <%@ include file="/WEB-INF/views/common/common.jsp" %>
    <script>
        $(function () {
            var v;
            var ot = '充值';
            //查询
            $('#pay_searchbox').searchbox({
                searcher: function (value, name) {
                    $.post('/member/getMemByKeyInfo.do?keyInfo=' + value, function (data) {
                        v = data;
                        $("#number").val(data.cardNum);
                        $("input[name=client_number]").val(data.cardNum);
                        $("#name").val(data.name);
                        console.log(data);
                        $("#level").val(data.gradename);
                        $("#birthday").val(data.birthday);
                        $("#balance").val(data.balance);
                        $("#integral").val(data.integral);
                        $("#tel").val(data.tel);
                    });
                },
                prompt: '请输入卡号,电话'
            });
            //确定按钮
            $("#pay_btn_save").click(function () {
                if (!v) {
                    $.messager.alert('温馨提示', '请获取会员信息', 'error');
                    return;
                }
                var number = '<b style="color: red">' + '卡号' + ' : ' + v.cardNum + ' , ' + '</b>';
                var name = '<b style="color: red">' + '姓名' + ' : ' + v.name + '</b>';
                var val = $('input:radio[name=op_id]:checked').val();
                var url;
                if (val == 0) {
                    var income = $("input[name=addmoney]").val();
                    if (!income) {
                        $.messager.alert('温馨提示', '请输入充值金额');
                        return;
                    }
                    income = '<b style="color: red">' + ot + ' : ' + income + '</b>';
                    var gift = $("input[name=givemoney]").val();
                    if (gift) {
                        gift = '<b style="color: red">' + '元 , 赠送' + ' : ' + gift + '</b>';
                    } else {
                        gift = '<b style="color: red">' + '元 , 赠送 : 0' + gift + '</b>';
                    }

                } else {
                    var income = $("input[name=submoney]").val();
                    income = '<b style="color: red">' + ot + ' : ' + income + '</b>';
                    var gift = $("input[name=givemoney]").val();
                    gift = '';
                }

                // 确定的对话框
                $.messager.confirm('温馨提示', '您确认要为' + number + name + '的会员'
                    + income + gift + '元吗？', function (r) {
                    if (r) { // 点了是
                        //表单
                        $('#pay_form').form('submit', {
                            url: '/recharge/save.do',
                            onSubmit: function () {
                                card_num = $("input[name=client_number]").val();
                                $("input[name=card_num]").val(card_num);
                            },
                            success: function (data) {
                                data = JSON.parse(data);
                                if (data.success) { // 成功
                                    // 提示下用户
                                    $.messager.alert('温馨提示', '成功', 'info', function () {
                                        // 刷新列表数据
                                        $("#pay_datagrid").datagrid('reload');
                                    });
                                } else { // 失败
                                    // 不必关闭对话框
                                    $.messager.alert('温馨提示', '保存失败', 'error');
                                }
                            }
                        });
                    }
                });
            });
            //充值记录数据
            $('#pay_datagrid').datagrid({
                url: '/recharge/list.do',
                fitColumns: true,
                pagination: true,
                singleSelect: true,
                columns: [[
                    {field: "cb", checkbox: true},
                    {field: "id", hidden: true},
                    {field: "card_num", title: "卡号", width: 80},
                    {field: "op_id", title: "操作类型", width: 80, formatter: opFormatter},
                    {field: "pay_id", title: "支付方式", width: 80, formatter: payFormatter},
                    {field: "oldbalance", title: "变动前余额", width: 80},
                    {field: "addmoney", title: "充值金额", width: 80},
                    {field: "givemoney", title: "赠送金额", width: 80},
                    {field: "newbalance", title: "变动后余额", width: 80},
                    {field: "rechargetime", title: "操作时间", width: 80}
                ]],
                onLoadSuccess: function (data) {
                    var panel = $(this).datagrid('getPanel');
                    var tr = panel.find('div.datagrid-body tr');
                    tr.each(function () {
                        var td = $(this).children('td');
                        td.css({
                            "border-width": "0"
                        });
                    });
                }
            });
            $("input[name=op_id]").click(function () {
                var val = $('input:radio[name=op_id]:checked').val();
                $("input[name=addmoney]").val('');
                $("input[name=givemoney]").val('');
                $("input[name=submoney]").val('');
                $("i[name=total]").html(0);
                if (val == 14) {
                    ot = '扣费';
                    $("#radioXJ").prop('checked', true);
                    $("div[name=pay_balance_div1]").attr('hidden', true);
                    $("div[name=pay_balance_div2]").attr('hidden', false);
                    $("span[name=pay_paytype_span]").attr('hidden', true);
                    $("input[name=pay_id]").attr('disabled', true);
                } else {
                    ot = '充值';
                    $("div[name=pay_balance_div1]").attr('hidden', false);
                    $("div[name=pay_balance_div2]").attr('hidden', true);
                    $("span[name=pay_paytype_span]").attr('hidden', false);
                    $("input[name=pay_id]").attr('disabled', false);
                }
            });

            //合计金额
            $("input[name=addmoney]").change(function () {
                $("i[name=total]").html($("input[name=addmoney]").val());
            });
            $("input[name=submoney]").change(function () {
                $("i[name=total]").html($("input[name=submoney]").val());
            });
        });

        function opFormatter(value, row, index) {
            if (value == "13") {
                return '充值';
            } else if (value == '14') {
                return '扣费';
            }
        }

        function payFormatter(value, row, index) {
            if (value == "9") {
                return '现金';
            } else if (value == '10') {
                return '支付宝';
            }
            else if (value == '11') {
                return '微信';
            } else if (value == '12') {
                return '银行卡';
            }

        }
    </script>


</head>
<body>
<table width="100%">
    <tr>
        <td width="50%">
            <div id="p1" class="easyui-panel"
                 style="height:350px;padding:10px;background:#fafafa;"
                 data-options="closable:true,fit:true,collapsible:true">
                <p align="right">
                    <input id="pay_searchbox" name="keyword"></input>
                </p>
                <div style="margin-top: 120px;font-size: 20px">
                    <p>
                        <b style="margin-left: 100px;">会员卡号：<input id="number" type="text"
                                                                   style="border: 0px;background:#fafafa;"
                                                                   disabled="disabled" value=""/></b>
                        <b>会员姓名：<input id="name" type="text" style="border: 0px;background:#fafafa;" disabled="disabled"
                                       value=""/></b>
                    </p>
                    <p>
                        <b style="margin-left: 100px;">当前等级：<input id="level" type="text"
                                                                   style="border: 0px;background:#fafafa;"
                                                                   disabled="disabled" value=""/></b>
                        <b>会员生日：<input id="birthday" type="text" style="border: 0px;background:#fafafa;"
                                       disabled="disabled" value=""/></b>
                    </p>
                    <p>
                        <b style="margin-left: 100px;">剩余金额：<input id="balance" type="text"
                                                                   style="border: 0px;background:#fafafa;"
                                                                   disabled="disabled" value=""/></b>
                        <b>当前积分：<input id="integral" type="text" style="border: 0px;background:#fafafa;"
                                       disabled="disabled" value=""/></b>
                    </p>
                    <p>
                        <b style="margin-left: 100px;">累计消费：<input type="text" style="border: 0px;background:#fafafa;"
                                                                   disabled="disabled" value=""/></b>
                        <b>会员电话：<input id="tel" type="text" style="border: 0px;background:#fafafa;" disabled="disabled"
                                       value=""/></b>
                    </p>
                </div>
            </div>
        </td>
        <td width="50%">
            <div id="p2" class="easyui-panel"
                 style="height:350px;padding:10px;background:#fafafa;"
                 data-options="closable:true,fit:true,collapsible:true">
                <div style="margin-top: 20px;font-size: 20px;margin-left: 50px;">
                    <form id="pay_form" name="pay_form" method="post">
                        <table>
                            <input name="client_number" type="hidden"/>
                            <input name="card_num" type="hidden"/>
                            <p>
                                操作类型:&nbsp;&nbsp;
                                <input type="radio" name="op_id" value="13" checked/> 充值
                                <input type="radio" name="op_id" value="14"/> 扣费
                            </p>
                            <div name="pay_balance_div1">
                                <p>
                                    充值金额:&nbsp;&nbsp;
                                    <input name="addmoney" type='text' placeholder="请输入充值金额"
                                           onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)"
                                           onblur="this.v();"/>
                                </p>
                                <p>
                                    赠送金额:&nbsp;&nbsp;
                                    <input name="givemoney" type='text' placeholder="请输入赠送金额"
                                           onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)"
                                           onblur="this.v();"/>
                                </p>
                            </div>
                            <div name="pay_balance_div2" hidden>
                                <p>
                                    扣款金额:&nbsp;&nbsp;
                                    <input name="submoney" type='text' placeholder="请输入扣款金额"
                                           onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)"
                                           onblur="this.v();"/>
                                </p>
                            </div>
                            <p>
                                支付方式:&nbsp;&nbsp;
                                <input id="radioXJ" type="radio" name="pay_id" value="9" checked/> 现金
                                <span name="pay_paytype_span">
                                <input type="radio" name="pay_id" value="12"/> 银行卡
                                <input type="radio" name="pay_id" value="10"/> 支付宝
                                <input type="radio" name="pay_id" value="11"/> 微信
                            </span>
                            </p>
                            <p>
                                备&emsp;&emsp;注:&nbsp;&nbsp;
                                <input type="text" name="rechargeinfo" class="easyui-textbox"
                                       prompt="请输入备注,最多50个字"
                                       style="width:200px;height:70px;">

                            </p>
                            合计金额:<span style="color: red">￥<i name="total">0</i></span>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a id="pay_btn_save" class="easyui-linkbutton">确认</a>
                        </table>
                    </form>
                </div>
            </div>
        </td>
    </tr>
</table>
</body>
<body>
<table id="pay_datagrid"></table>
</body>
</html>

